<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="keywords" content="网页版计时器，在线秒表计时器" />
    <meta name="description" content="秒表计时器在线，秒表计时器在线用，在线秒表计时器下载，秒表计时器如何使用，秒表计时器使用，秒表计时器使用方法，秒表计时器使用说明，秒表计时器，秒表计时器下载，电脑秒表计时器下载" />
    <title>网页版计时器 - Powered by Andyguo</title>
    <link rel="stylesheet" href="css/style.css?v=1">
    <script type="text/javascript">
        function begin(evt) // handle the keydown and reset event
        {
            if (evt.keyCode == 32) {
                if (running == 0) {
                    then = new Date();
                    running = 1;
                    show();


                } else if (running == 1) {
                    running = 2;
                    //      document.getElementById("watch1").innerHTML=running;
                } else {
                    //     document.getElementById("watch1").innerHTML="ok";
                    ShowDatas(toSeconds(nowSeconds));
                    document.getElementById("watch").innerHTML = "00:00.00";
                    running = 0;


                }
            }
        }
    </script>

</head>

<body onLoad="rndCube()">
    
    <script type="text/javascript">
    var then; //used by show()
    var nowDec;
    var nowBest;
    var nowWorst;
    var running = 0; // stopwatch status
    var timeint;
    var i = 0;

    var totalsec;
    var sec;
    var min;
    var subsec;
    var secdis;
    var mindis;
    var subsecdis; // the var above used by show(), is pretty much temp vars

    var datas = new Array() // store the records
    var nowSecondes;
    var Max = 25; //random cube steps
    var arr = new Array(); //random cube array
    var myinterval = 20; //interval for ie
    if (navigator.userAgent.indexOf("Gecko") > -1) myinterval = 10;

    function stop(evt) // handle the keyup event
    {
        if (running == 1 && evt.keyCode == 32)
            clearTimeout(timeint);
    }

    function toSeconds(dec) // convert the stopwatch display text to seconds
    {
        var Ms;
        var tmpDec = dec.split(":");
        if (tmpDec[0] * 10 / 10 > 0) {
            Ms = tmpDec[0] * 60;
            return (Ms + tmpDec[1] * 10 / 10);
        } else {
            return (tmpDec[1] * 10 / 10);
        }

    }

    
    var a = 0;

    function ShowDatas(dec) //push the record in array, display the nowBest and nowWorst and display the record table
    {
        if (dec == 0) { return false; }
        if (dec != -1) {
            var newDec = get2(dec);
            datas.push(newDec);
        }

        SortDatas();

        ShowDetails();
        var tempstraa = (datas.length != 0) ? sec2minsec(nowBest) : "";
        spanBest.innerHTML = "<b style=color:red>" + tempstraa + "</b>";
        tempstraa = (datas.length != 0) ? sec2minsec(nowWorst) : "";
        spanWorst.innerHTML = "<b>" + tempstraa + "</b>";
        var tmp1 = 0;
        for (i = 0; i < datas.length; i++) {
            tmp1 += datas[i];
        }
        tempstraa = (datas.length != 0) ? sec2minsec(get2(tmp1 / datas.length)) : "";

        spanAv.innerHTML = "<b>" + tempstraa + "</b>";

    }

    function sec2minsec(n) // convert the seconds number in to **:**.** text format
    {
        if (n > 60) {
            var tmpmins = Math.floor(n / 60);
            var tmpseconds = get2(n - tmpmins * 60);
            var tmpstring;
            if (tmpseconds < 10) {
                tmpstring = tmpmins + ":0" + tmpseconds;
            } else tmpstring = tmpmins + ":" + tmpseconds;
            return tmpstring;
        } else return n;
    }

    function ShowDetails() //display the record table
    {
        if (datas.length > 12) { a = datas.length - 12; }
        var tmpTd = "<table cellspacing=1 bgcolor=olive><tr align=center bgcolor='#EEEEEE'><td width=50>1</td><td width=50>2</td><td width=50>3</td><td width=50>4</td><td width=50>5</td>";
        tmpTd += "<td width=50>6</td><td width=50>7</td><td width=50>8</td><td width=50>9</td><td width=50>10</td><td width=50>11</td><td width=50>12</td></tr><tr bgcolor=white>";
        for (i = a; i < (12 + a); i++) {

            tmpTd += "<td align=center>";
            if (datas[i] == undefined) { tmpTd += "-"; } else {
                if (datas[i] == nowBest) {

                    tmpTd += "<font color=red><b>" + sec2minsec(datas[i]) + "*</b></font>";
                } else if (datas[i] == nowWorst) {
                    tmpTd += "<font color=green>" + sec2minsec(datas[i]) + "*</font>";

                } else {
                    tmpTd += sec2minsec(datas[i]);
                }
            }
            tmpTd += "</td>";
        }
        tmpTd += "</tr></table>";
        //alert(datas.join(","));
        div1.innerHTML = "";
        div1.innerHTML = tmpTd;
        rndCube();

    }

    function show() //show the stopwatch display, will run every 20 or 10 ms
    {
        var now = new Date();
        diff = now.getTime() - then.getTime();
        if (diff < 1000) {
            mindis = "00";
            secdis = "00";
            subsec = Math.floor(diff / 10);
            if (subsec < 10)
                subsecdis = "0" + subsec;
            else
                subsecdis = subsec;
        } else if (diff < 60000) {
            mindis = "00";
            sec = Math.floor(diff / 1000);
            if (sec < 10)
                secdis = "0" + sec;
            else
                secdis = sec;

            subsec = Math.floor((diff % 1000) / 10);
            if (subsec < 10)
                subsecdis = "0" + subsec;
            else
                subsecdis = subsec;
        } else {
            totalsec = Math.floor(diff / 1000); //how many seconds?
            sec = totalsec % 60; //how many seconds-60*n
            if (sec < 10)
                secdis = "0" + sec;
            else
                secdis = sec;

            min = (totalsec - sec) / 60; //how many minutes?
            if (min < 10)
                mindis = "0" + min;
            else
                mindis = min;

            subsec = Math.floor((diff % 1000) / 10);
            if (subsec < 10)
                subsecdis = "0" + subsec;
            else
                subsecdis = subsec;

        }

        nowSeconds = mindis + ":" + secdis + "." + subsecdis;
        document.getElementById("watch").innerHTML = nowSeconds;
        timeint = setTimeout("show()", myinterval)

    }


    function get2(dec) //取两位小数点
    {
        return Math.round(dec * 100) / 100;
    }

    function SortDatas() //get max and min
    {
        var tmpArr = new Array();
        for (i = 0; i < datas.length; i++) {
            tmpArr[i] = datas[i];
        }
        tmpArr.sort(function(a, b) { return a - b; });
        nowBest = tmpArr[0];
        nowWorst = tmpArr[tmpArr.length - 1];
        // ShowBestAv();
    }

    function mycls() // clear all records
    {
        clearTimeout(timeint);
        nowSeconds = "00:00:00";
        running = 0;
        datas = new Array();
        ShowDetails();
        document.getElementById("watch").innerHTML = "00:00.00";

    }
    </script>
    <script type="text/javascript">
    function cancel() {
        clearTimeout(timeint);

        nowSeconds = "00:00:00";

        running = 0;
        rndCube();
        document.getElementById("watch").innerHTML = "00:00.00";
        //	alert("请点击一下网页上的任意空白处，让焦点从这个<不记录此次成绩>按钮上移开，即可开始新的一次计时。");

    }

    function delrecord() {
        clearTimeout(timeint);

        nowSeconds = "00:00:00";
        running = 0;
        rndCube();
        document.getElementById("watch").innerHTML = "00:00.00";
        datas.pop();
        ShowDatas(-1);
    }

    function isslice(move1, move2) //to judge if 2 moves are slice moves.
    {
        if (Math.floor(move1 / 2) == Math.floor(move2 / 2)) return true;
        else return false;
    }

    function checkmove(move) {
        if (move == arr[arr.length - 1]) return true;
        else if (move == arr[arr.length - 2] && isslice(move, arr[arr.length - 1])) return true;
        else return false;
    }


    function rndCube() {
        var move = "";
        var rndMove = new Array("R", "L", "F", "B", "U", "D");
        var add = 0;
        var tmpRnd;
        arr = new Array();
        for (i = 0; i < Max; i++) {
            do {
                tmpRnd = Math.floor(Math.random() * 6);
            }
            while (checkmove(tmpRnd))

            arr.push(tmpRnd);

        }
        for (i = 0; i < arr.length; i++) {
            var tmp = Math.floor(Math.random() * 5);
            if (tmp == 4) { move += rndMove[arr[i]] + "2"; } else if (tmp == 2 || tmp == 3) { move += rndMove[arr[i]] + "'"; } else { move += rndMove[arr[i]]; }
            move += " ";
        }


        rndDiv.innerHTML = move;
    }

    function exportrecord() {
        clearTimeout(timeint);

        nowSeconds = "00:00:00";

        running = 0;
        rndCube();
        document.getElementById("watch").innerHTML = "00:00.00";
        if (datas.length < 1) {
            alert("目前没有记录");
            return false;
        }
        var temprec = datas.toString();
        window.open("stopwatchsave.php?str=" + temprec, "_self");

    }

    function changebg(p) {
        for (i = 1; i < 4; i++) {
            document.getElementById("big" + i).style.color = 'blue';
            document.getElementById("big" + i).style.textDecoration = 'underline';
            document.getElementById("big" + i).style.backgroundColor = 'transparent';
        }
        document.getElementById("big" + p).style.color = 'black';
        document.getElementById("big" + p).style.textDecoration = 'none';
        document.getElementById("big" + p).style.backgroundColor = '#FFCCFF';
    }

    function buttonstuff(p) {
        document.getElementById(p).blur();
        document.getElementById('watch').focus();
    }
    </script>
    <div class="page-main">
    <div class="cube-list-rank">
    <div class="search-box"><input type="text" v-model='search' placeholder="输入名称搜索" /></div>
    	<dl>
    		<dt>群友成绩排行榜</dt>
    		<dd v-for="(v,index) in searchData">
    			<span class="qq-img"><img :src="'http://q1.qlogo.cn/g?b=qq&nk=' + v.qq + '&s=100' " ></span><span>{{v.uname}}</span><span>（sub{{v.result}}）</span>
    		</dd>
    	</dl>
        <div class="post-cuber"><a href="dosub/index.html">我要提交成绩</a></div>
    </div>
        <div id="pc" tabindex= "0">
            <div id="watch" style="font-size:130px; font-family:Arial; font-weight:bold; color:navy; text-align:center">00:00.00</div>
            <div id="mytext">
                <div class="text">
                    用
                    <font color="#000080"><b>空格</b></font>键<b>开始</b>(松开时触发)、<b>停止</b>(按下时触发)、<b>复位</b>(同时记录成绩)<a href="#" onClick="document.getElementById('mytext').style.display='none';this.blur();document.getElementById('watch').focus();return false;">隐藏说明文字</a>
                    </font>
                </div>

            </div>
            <div id="rndDiv"></div>
            <div id="buttons">
                <input type='button' class="btn1" value="DNF or POP 不记录此次成绩" id="notrecord1" onclick="cancel();buttonstuff('notrecord1');" title="DNF=Do Not Finish,POP=飞棱.若成绩已记入表格.请用右边清除上次成绩按钮。">
                <input type='button' class="btn" value="清除上次成绩" id="delrecord1" onclick="delrecord();buttonstuff('delrecord1');">
                <input type='button' class="btn" value="清除所有记录" id="clear1" onClick="mycls();buttonstuff('clear1')">
                <input type='button' class="btn2" value="导出成绩到excel" id="exportrecord1" onclick=" exportrecord();buttonstuff('exportrecord1');">
                <span style="display: inline;">秒表尺寸：
<a href="#" onClick="changebg(1);document.getElementById('watch').style.fontSize=200+'px';this.blur();document.getElementById('watch').focus();return false;" id="big1">大</a>，
<a href="#" onClick="changebg(2);document.getElementById('watch').style.fontSize=130+'px';this.blur();document.getElementById('watch').focus();return false;" id="big2">中</a>，
<a href="#" onClick="changebg(3);document.getElementById('watch').style.fontSize=70+'px';this.blur();document.getElementById('watch').focus();return false;" id="big3">
小</a></span></div>
            <div id=div1>
                <table cellspacing="1" bgcolor=olive>
                    <tr bgcolor=#EEEEEE align=center>
                        <td width=50>1</td>
                        <td width=50>2</td>
                        <td width=50>3</td>
                        <td width=50>4</td>
                        <td width=50>5</td>
                        <td width=50>6</td>
                        <td width=50>7</td>
                        <td width=50>8</td>
                        <td width=50>9</td>
                        <td width=50>10</td>
                        <td width=50>11</td>
                        <td width=50>12</td>
                    </tr>
                    <tr bgcolor=white align=center>
                        <td width=50>-</td>
                        <td width=50>-</td>
                        <td width=50>-</td>
                        <td width=50>-</td>
                        <td width=50>-</td>
                        <td width=50>-</td>
                        <td width=50>-</td>
                        <td width=50>-</td>
                        <td width=50>-</td>
                        <td width=50>-</td>
                        <td width=50>-</td>
                        <td width=50>-</td>
                    </tr>
                </table>
            </div>
            <div class="res-avg">
                <ul>
                    <li><span class="text1">最快:</span><span id="spanBest" class="text2"></span></li>
                    <li><span class="text1">最慢:</span><span id="spanWorst" class="text2"></span></li>
                    <li><span class="text1">平均:</span><span id="spanAv" class="text2"></span></li>
                </ul>
            </div>
            
        </div>
        
    </div>
    <div class="footer">
        <p>Powered by <a href="http://www.d163.net/" target="_blank">Andyguo</a></p>
    </div>
    <script type="text/javascript">
    document.getElementById("watch").focus();
    document.getElementById("big2").style.color = 'black';
    document.getElementById("big2").style.textDecoration = 'none';
    document.getElementById("big2").style.backgroundColor = '#FFCCFF';
    /* 判断是否手机访问
    if (testmobile()) {

        document.getElementById('pc').style.display = "none";

    } else {
        document.getElementById('mobi').style.display = "none";

    }
    */
    </script>
    <script src="js/jquery.min.2.1.4.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/index.js?v=1.0"></script>
    
</body>

</html>